<template>
  <div class="w-full h-full">
    <!-- <LineChart />
    <cloud-charts class="mt-6" :height="'300px'" :options="options2.value" /> -->
    <!-- <img :src="overviewImg" class="w-full h-full" alt="overview" /> -->
    <div class="overview-bg">
      <div class="overview-line">
        <div class="overview-line-top">
          <div class="overview-detail">
            <div class="overview-detail-card" @click="goToPage('NodeList')">
              <div class="overview-detail-right-node"></div>
              <div class="overview-detail-title-row">
                <div class="overview-detail-title">节点数</div>
                <i-icons-right></i-icons-right>
              </div>

              <div class="overview-detail-item">
                <div class="overview-detail-number-main">
                  <a-statistic
                    :value="moneyOverviewData?.node?.total || 0"
                    :precision="0"
                    :value-from="0"
                    :start="true"
                    separator=","
                    show-group-separator
                    animation
                    placeholder="0"
                    class="count" />
                  <span class="text-sm">个</span>
                </div>
              </div>
              <a-divider :size="1" type="dashed" margin="0" />
              <div class="overview-detail-numbers">
                <div class="overview-detail-number">
                  <div class="overview-detail-key">运行</div>
                  <div class="overview-detail-value">
                    {{ moneyOverviewData?.node?.running || 0 }}
                  </div>
                </div>
                <div class="overview-detail-number">
                  <div class="overview-detail-key">离线</div>
                  <div class="overview-detail-value">
                    {{ moneyOverviewData?.node?.offline || 0 }}
                  </div>
                </div>
                <div class="overview-detail-number">
                  <div class="overview-detail-key">停止</div>
                  <div class="overview-detail-value">
                    {{ moneyOverviewData?.node?.stopped || 0 }}
                  </div>
                </div>
                <div class="overview-detail-number">
                  <div class="overview-detail-key">异常</div>
                  <div
                    class="overview-detail-value"
                    :class="{
                      'text-[#F53F3F]': moneyOverviewData?.node?.abnormal
                    }">
                    {{ moneyOverviewData?.node?.abnormal || 0 }}
                  </div>
                </div>
              </div>
            </div>
            <div class="overview-detail-card" @click="goToPage('SiteList')">
              <div class="overview-detail-right-site"></div>
              <div class="overview-detail-title-row">
                <div class="overview-detail-title">站点数</div>
                <i-icons-right />
              </div>
              <div class="overview-detail-item">
                <div class="overview-detail-number-main">
                  <a-statistic
                    :value="moneyOverviewData?.site?.total || 0"
                    :precision="0"
                    :value-from="0"
                    :start="true"
                    separator=","
                    show-group-separator
                    animation
                    placeholder="0"
                    class="count" />
                  <span class="text-sm">个</span>
                </div>
                <div class="overview-detail-icon"></div>
              </div>
              <a-divider :size="1" type="dashed" margin="0" />
              <div class="overview-detail-numbers">
                <div class="overview-detail-number">
                  <div class="overview-detail-key">已接入</div>
                  <div class="overview-detail-value">
                    {{ moneyOverviewData?.site?.resolved || 0 }}
                  </div>
                </div>
                <div class="overview-detail-number">
                  <div class="overview-detail-key">未接入</div>
                  <div
                    class="overview-detail-value"
                    :class="{
                      'text-[#FF7D00]': moneyOverviewData?.site?.unresolved
                    }">
                    {{ moneyOverviewData?.site?.unresolved || 0 }}
                  </div>
                </div>
              </div>
            </div>
            <div class="overview-line-top-right">
              <div class="overview-face">
                <div class="overview-face-title">
                  <div class="overview-face-icon">
                    <a-avatar :size="32" shape="circle">
                      <img src="@/assets/images/face.png" alt="avatar" />
                    </a-avatar>
                  </div>
                  <div class="overview-face-text">
                    您好，{{ appStore.userInfo?.username }}
                  </div>
                </div>
              </div>
              <div class="overview-face-details">
                <div class="overview-face-item">
                  <div class="overview-face-key">最近登录 IP</div>
                  <div class="overview-face-value">
                    {{ appStore.userInfo?.login_ip }}
                  </div>
                </div>
                <div class="overview-face-item">
                  <div class="overview-face-key">所在地</div>
                  <div class="overview-face-value">
                    {{ appStore.userInfo?.login_location }}
                  </div>
                </div>
                <div class="overview-face-item">
                  <div class="overview-face-key">登录时间</div>
                  <div class="overview-face-value">
                    {{ formatUnix(appStore.userInfo?.login_at) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="overview-line-bottom">
          <div class="overview-line-title">今日数据</div>
          <div class="overview-chart__header">
            <a-radio-group
              v-model="chartType"
              style="position: relative; top: 24px; z-index: 10"
              type="button">
              <a-radio
                v-for="{ key, label } in typeList"
                :key="key"
                :value="key"
                :name="key"
                class="w-[72px] text-center"
                >{{ label }}</a-radio
              >
            </a-radio-group>
          </div>
          <LineChart
            :type="chartType"
            height="500px"
            :time-date="timeDate"
            :math-random="MathRandom" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getApiSummaryApi } from '@/apis/modules/resolve/statistics'
import { useAppStore } from '@/stores/app'
import dayjs from 'dayjs'
import LineChart from './LineChart.vue'
const router = useRouter()
const loading = ref(false)
const appStore = useAppStore()
const MathRandom = ref(0)
// 饼图
const moneyOverviewData = ref<any>({})
const chartType = ref('traffic')
const typeList: { label: string; key: string }[] = [
  { label: '流量', key: 'traffic' },
  { label: '带宽', key: 'bandwidth' },
  { label: '请求数', key: 'request' },
  { label: '命中率', key: 'hitRate' }
]
/** 获取概览 */
const getOverview = () => {
  loading.value = true
  getApiSummaryApi({})
    .then((res) => {
      moneyOverviewData.value = res
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const goToPage = (path: string) => {
  router.push({
    name: path
  })
}

const timeDate = ref(dayjs().format('YYYY-MM-DD'))

onMounted(() => {
  getOverview()
})
</script>

<style scoped lang="less">
.overview-bg {
  width: calc(100vw - 206px);
  height: 300px;
  position: absolute;
  object-fit: cover;
  margin: -24px;
  z-index: 0;
}
.overview-line {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  .overview-line-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;

    .overview-detail {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      flex: 1 0 0;
      align-self: stretch;
      .overview-detail-card {
        display: flex;
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex: 1 0 0;
        border-radius: 12px;
        background: #fff;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        &:hover {
          transform: translateY(-10px);
        }
        /* 卡片容器投影 */
        box-shadow: 0px 4px 8px 0px rgba(19, 30, 54, 0.06);
        .overview-detail-item {
          display: flex;
          align-items: baseline;
          gap: 4px;
        }
        .overview-detail-right-node {
          width: 120px;
          height: 120px;
          position: absolute;
          right: 0px;
          top: 0px;
          background: url('@/assets/images/node.svg') repeat;
        }
        .overview-detail-right-site {
          width: 120px;
          height: 120px;
          position: absolute;
          right: 0px;
          top: 0px;
          background: url('@/assets/images/site.svg') repeat;
        }
        .overview-detail-title-row {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          align-self: stretch;
        }
        .overview-detail-title {
          height: 22px;
          flex: 1 0 0;
          color: var(---color-text-1, #1d2129);
          font-size: 14px;
          font-weight: 700;
          line-height: 22px; /* 157.143% */
        }
        .overview-detail-number-main {
          font-family: 'BebasNeue';
          font-size: 40px;
          font-style: normal;
          line-height: normal;
          background: linear-gradient(
            132deg,
            #226bc5 14.83%,
            #4627de 51.45%,
            #ba84ff 88.07%
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display: flex;
          align-items: baseline;
          gap: 4px;
          :deep(.arco-statistic-value-integer) {
            font-size: 40px;
            font-family: 'BebasNeue';
            font-weight: 400;
          }
          :deep(.arco-statistic) {
            line-height: 42px;
          }
        }
        .overview-detail-number {
          color: var(---color-text-2, #393c40);
          font-family: BebasNeue, sans-serif;
          font-size: 28px;
          font-weight: 400;
          line-height: normal;
          //margin-top: 8px;
        }
        .overview-detail-numbers {
          display: flex;
          justify-content: space-between;
          align-items: center;
          align-self: stretch;
          .overview-detail-number {
            color: var(---color-text-3, #646a73);
            display: flex;
            //height: 22px;
            align-items: flex-end;
            gap: 4px;
            .overview-detail-key {
              font-family: 'Microsoft YaHei UI';
              font-size: 14px;
              font-weight: 400;
              line-height: 22px; /* 157.143% */
            }
            .overview-detail-value {
              font-family: 'BebasNeue';
              font-size: 16px;
              font-weight: 400;
            }
          }
        }
      }
      // .detail-bg-blue {
      //   border: 1px solid var(---color-border-1, #f3f4f7);
      //   background: linear-gradient(
      //     180deg,
      //     rgba(13, 174, 255, 0.1) 0%,
      //     rgba(13, 174, 255, 0) 100%;
      //   );
      //   &:hover {
      //     border: 1px solid var(---color-border-white, #fff);
      //     box-shadow: 0px 4px 24px 0px rgba(209, 222, 229, 0.3);
      //   }
      // }
      // .detail-bg-green {
      //   border: 1px solid var(---color-border-1, #f3f4f7);
      //   background: linear-gradient(
      //     180deg,
      //     rgba(83, 220, 229, 0.1) 0%,
      //     rgba(83, 220, 229, 0) 100%
      //   );
      //   &:hover {
      //     border: 1px solid var(---color-border-white, #fff);
      //     box-shadow: 0px 4px 24px 0px rgba(209, 229, 227, 0.3);
      //   }
      // }
    }
    .overview-line-top-right {
      display: flex;
      padding: 20px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      flex: 1 0 0;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0px 4px 8px 0px rgba(19, 30, 54, 0.06);
      .overview-face-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .overview-face-text {
        color: var(---color-text-2, #393c40);
        font-size: 14px;
        font-weight: 700;
        line-height: 22px; /* 157.143% */
      }
      .overview-face-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
        align-self: stretch;
      }
      .overview-face-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        color: var(---color-text-3, #646a73);
        font-size: 12px;
        line-height: 20px; /* 166.667% */
      }
    }
  }
  .overview-line-bottom {
    display: flex;
    height: 442px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    //gap: 24px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 30%);
    box-shadow: 0px 4px 8px 0px rgba(19, 30, 54, 0.06);
    backdrop-filter: blur(5px);
    margin-top: 30px;
    .overview-line-title {
      color: var(---color-text-1, #1d2129);
      font-size: 14px;
      font-weight: 700;
      line-height: 22px; /* 157.143% */
      margin-bottom: -10px;
    }
  }
}
</style>
